<!-- 上门中 页面 -->
<template>
	<view class="view-container-box u-rela">
		<view class="top-tip-box">
			<view class="icon-box" style="background-color: #F10000;" v-if="orderData.status === -1">
				<u-icon name="close" size="20" color="#FFF"></u-icon>
			</view>
			<view class="icon-box" :style="{ backgroundColor: orderData.status === 3 ? '#39D94E' : '#FDB145' }" v-else>
				<u-icon name="checkbox-mark" size="30" color="#FFF"></u-icon>
			</view>
			<text v-if="orderData.status === -1">订单已失效</text>
			<text v-else>{{ orderData.status === 3 ? '服务已完成' : '待服务' }}</text>
		</view>
		<view class="tip-text" v-if="orderData.status === -1">{{orderData.reason}}</view>
		<block v-else>
			<view class="img-box">
				<u-image width="184" height="184" :src="orderData.user_info.avatar ? orderData.user_info.avatar : vuex_url + '/static/imgs/logo-min.png'"></u-image></view>
			<view class="tip-text" style="margin-top: 26rpx;">客户姓名：{{orderData.user_info.nick_name}}</view>
			<view class="door-time-text">上门时间：{{$u.utils.formatDate(orderData.start_time || '')}}</view>
			<view class="order-phone-text" style="font-size: 32rpx;">客户电话：{{orderData.user_info.mobile || ''}}</view>
			<view class="order-phone-text">客户地址：{{orderData.user_info.addr}}</view>
		</block>

		<block v-if="orderData.id === 2">
			<define-button buttonText="联系客户" height="89" style="margin-top: 60rpx;" @click="callPhoneClick"></define-button>
			<!-- 底部的 SOS 求救电话区域 -->
			<view class="bottom-tip-box" @click="SOSClick">
				<view class="sos-box">SOS</view>
				<text>紧急情况请拨打电话</text>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 订单 id 从来源页传递过来的，用于查询该条数据
			order_id: '',
			// 页面渲染的用户数据
			orderData: {}
		};
	},
	onLoad(order) {
		this.order_id = order.id || order.order_id;
		this.getData()
		// 动态设置页面标题（假定订单 id 为 1 的是 失效原因，否则为 订单详情）
		if (this.order_id === '1') {
			uni.setNavigationBarTitle({
				title: '失效原因'
			});
		} else {
			uni.setNavigationBarTitle({
				title: '订单详情'
			});
		}
	},
	methods: {
		async getData() {
			const res = await this.$u.api.getLawyerService({id: this.order_id})
			if(!res) return
			this.orderData = res
			console.log(this.orderData);
		},
		// 联系客户按钮的点击事件
		callPhoneClick() {
			this.$u.toast('点击了联系客户按钮');
		},
		// 底部求救区域的点击事件
		SOSClick() {
			this.$u.toast('点击了紧急求救按钮');
		}
	}
};
</script>

<style lang="scss" scoped>
.view-container-box {
	width: 750rpx;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.top-tip-box {
	margin-top: 100rpx;
	font-size: 48rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	color: #333333;
	display: flex;
	align-items: center;
	.icon-box {
		width: 45rpx;
		height: 45rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		border-radius: 50%;
		background-color: #fdb145;
		margin-right: 13rpx;
	}
}
.img-box {
	width: 184rpx;
	height: 184rpx;
	margin-top: 40rpx;
	border-radius: 50%;
	overflow: hidden;
}
.tip-text {
	margin-top: 26rpx;
	font-size: 36rpx;
	font-family: Adobe Heiti Std;
	// font-weight: 700;
	font-weight: normal;
	color: #020202;
}
.door-time-text {
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ff5859;
	line-height: 42rpx;
	margin-top: 26rpx;
}
.order-phone-text {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #929292;
	line-height: 42rpx;
	margin-top: 18rpx;
}
.bottom-tip-box {
	position: absolute;
	bottom: 104rpx;
	right: 48rpx;
	width: 120rpx;
	display: flex;
	flex-direction: column;
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #141418;
	text-align: center;
}
.sos-box {
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(112deg, #ff534f, #f20500);
	border-radius: 50%;
	line-height: 120rpx;
	text-align: center;
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
}
</style>
